<template>
  <div class="honour">
    <h2 class="wow" style="visibility: visible">荣誉锦旗</h2>
    <div class="swiper-box wow" style="visibility: visible">
      <swiper loop="true" @slideChange="onSlideChange" :modules="modules" :pagination="pagination">
        <swiper-slide>
          <div class="bottom-box">
            <div class="left">
              <img
                src="https://www.shbotao.net//uploads/allimg/20211127/a7e13f018cea0cdbb2fa091333d8a685.png"
              />
            </div>
            <div class="right">
              <div class="right-top">
                <img
                  src="https://www.shbotao.net//uploads/allimg/20211127/61c6799aa94fe781c5200e31ba6a51d0.png"
                />
              </div>
              <div class="right-bottom">
                <img
                  src="https://www.shbotao.net//uploads/allimg/20211127/35e086725b03a83366d29ace0625190c.png"
                />
              </div>
            </div>
          </div>
          <div class="top-box">
            <div class="left">
              <img
                src="https://www.shbotao.net//uploads/allimg/20211127/ac75e6b50fb2b14990a7562c305e34c8.png"
              />
            </div>
            <div class="right">
              <img
                src="https://www.shbotao.net//uploads/allimg/20211127/1e0a995f85da45694a9beac7e6e1c78b.png"
              />
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="bottom-box">
            <div class="left">
              <img
                src="https://www.shbotao.net//uploads/allimg/20211127/a7e13f018cea0cdbb2fa091333d8a685.png"
              />
            </div>
            <div class="right">
              <div class="right-top">
                <img
                  src="https://www.shbotao.net//uploads/allimg/20211127/61c6799aa94fe781c5200e31ba6a51d0.png"
                />
              </div>
              <div class="right-bottom">
                <img
                  src="https://www.shbotao.net//uploads/allimg/20211127/35e086725b03a83366d29ace0625190c.png"
                />
              </div>
            </div>
          </div>
          <div class="top-box">
            <div class="left">
              <img
                src="https://www.shbotao.net//uploads/allimg/20211127/ac75e6b50fb2b14990a7562c305e34c8.png"
              />
            </div>
            <div class="right">
              <img
                src="https://www.shbotao.net//uploads/allimg/20211127/1e0a995f85da45694a9beac7e6e1c78b.png"
              />
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination pagin"></div>
      </swiper>
    </div>
  </div>
</template>

<script setup>
import { Pagination, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import { ref } from 'vue'
const onSlideChange = () => {}
const pagination = ref({
  el: '.pagin'
})
const modules = ref([Pagination, A11y])
</script>

<style>
.honour .swiper {
  padding-bottom: 0.5rem;
}
.bt-owner-voice .honour {
  padding: 1rem 0.29rem 1.5rem 0.31rem;
  background: url(/src/assets/img/voice_p1_bj.png);
  background-size: cover;
}

.bt-owner-voice .honour h2 {
  color: #fff;
  margin-bottom: 0.6rem;
}

.bt-owner-voice .honour .swiper-box {
  padding: 0.5rem 0;
}

.bt-owner-voice .honour .swiper-box div,
.bt-owner-voice .honour .swiper-box div img {
  border-radius: 0.1rem;
}

.bt-owner-voice .honour .swiper-box .top-box {
  display: flex;
}

.bt-owner-voice .honour .swiper-box .top-box > div {
  flex: 1;
  height: 1.8rem;
}

.bt-owner-voice .honour .swiper-box .top-box > div img {
  width: 100%;
  height: 100%;
}

.bt-owner-voice .honour .swiper-box .top-box > div:first-child {
  margin-right: 0.08rem;
}

.bt-owner-voice .honour .swiper-box .bottom-box {
  height: 4rem;
  display: flex;
  margin-bottom: 0.09rem;
}

.bt-owner-voice .honour .swiper-box .bottom-box .left {
  margin-right: 0.1rem;
  width: 4rem;
  height: 4rem;
}

.bt-owner-voice .honour .swiper-box .bottom-box .left img {
  width: 100%;
  height: 4rem;
}

.bt-owner-voice .honour .swiper-box .bottom-box .right {
  flex: 1;
}

.bt-owner-voice .honour .swiper-box .bottom-box .right .right-top {
  display: flex;
  height: 2rem;
  margin-bottom: 0.1rem;
}

.bt-owner-voice .honour .swiper-box .bottom-box .right .right-top img {
  flex: 1;
  width: 2rem;
  height: 100%;
  border-radius: 0.1rem;
}

.bt-owner-voice .honour .swiper-box .bottom-box .right .right-top img:first-child {
  width: 2.1rem;
  margin-right: 0.1rem;
}

.bt-owner-voice .honour .swiper-box .bottom-box .right .right-bottom {
  height: 1.9rem;
}

.bt-owner-voice .honour .swiper-box .bottom-box .right .right-bottom img {
  height: 100%;
  width: 100%;
}
</style>